<template>
<view class="content" :style="membersList.length==0||membersList[swiperIndex-1].state?'padding-bottom:0;background:#f6eddd':'padding-bottom:204rpx;background: #f6eddd;'">
  <block v-if="membersList&&membersList.length!=0">
  <view class='swiperContainer'>
    <swiper class='swiper_block' :current="swiperIndex-1" :next-margin="swiperIndex==membersList.length?'0rpx':'52rpx'" :previous-margin="swiperIndex==1?'0rpx':'52rpx'" :autoplay="false" interval="5000" duration="500" @change="swiperChange" indicator-dots="true" indicator-color="#8f8e92" indicator-active-color="#ffffff" circular="false" easing-function="easeInOutCubic">
      <block v-for="(item,index) in membersList"  :key="index">
        <swiper-item class='swiper_item' :data-imageUrl='item.cardBanner' :data-index='index' bindtap='lookBigImage'>
          <view class="img_blcok" :style="{justifyContent:(index+1==swiperIndex?'center':(index+1<swiperIndex?'flex-end':'flex-start'))}">
            <image class="swiper_item_banner"  @tap='tolinkUrl' :data-link="'level_detail.html?id='+membersList[swiperIndex-1].id" mode='aspectFit' :src="item.cardBanner" :style="{borderRadius: '20rpx',height:(index+1==swiperIndex?'260rpx':'180rpx'),width:(index+1==swiperIndex?'98%':'72%')}" />
            <image v-if="item.state" :style="{top:(index+1==swiperIndex?(swiperIndex==1||swiperIndex==totalImg?(totalImg==1?'30rpx':'32rpx'):'40rpx'):(swiperIndex==totalImg?'64rpx':'66rpx')),right:(index+1==swiperIndex?(swiperIndex==1||swiperIndex==totalImg?(totalImg==1?'40rpx':'26rpx'):'20rpx'):(swiperIndex==totalImg?'22rpx':'10rpx'))}" class="swiper_state_icon" src="https://image1.sansancloud.com/xianhua/2019_12/17/18/20/27_622.jpg?x-oss-process=style/preview_120"></image>
            <image v-else :style="{top:(index+1==swiperIndex?(swiperIndex==1||swiperIndex==totalImg?(totalImg==1?'30rpx':'32rpx'):'40rpx'):(swiperIndex==totalImg?'64rpx':'66rpx')),right:(index+1==swiperIndex?(swiperIndex==1||swiperIndex==totalImg?(totalImg==1?'40rpx':'26rpx'):'20rpx'):(swiperIndex==totalImg?'22rpx':'10rpx'))}" class="swiper_state_icon" src="https://image1.sansancloud.com/xianhua/2019_12/17/18/20/27_929.jpg?x-oss-process=style/preview_120"></image>
          </view>
        </swiper-item> 
      </block>
    </swiper>
    <view class="swiper_item_bg" :style="{background:membersList[swiperIndex-1].backgroundColor}">
    </view>
    <view class="swiper_item_info">
      <text class="swiper_item_info_text" :data-link="'user_recharge.html?money='+membersList[swiperIndex-1].needPayAmount" @tap="tolinkUrl" v-if="!membersList[swiperIndex-1].state">{{membersList[swiperIndex-1].limitDescription}}</text>
      <text class="swiper_item_info_text" @tap='tolinkUrl' :data-link="'level_detail.html?id='+membersList[swiperIndex-1].id" v-else>你已开通{{membersList[swiperIndex-1].levelName}}</text>
    </view>
  </view>
  <view class="members_info_block">
    <!-- 权益模块 -->
    <view class="members_right" v-for="(itemBlock,index) in membersList[swiperIndex-1].limits.groups" :key="index">
      <view class="members_right_title">
        <view class="members_right_title_block">
          <image class="members_right_title_img" src="https://image1.sansancloud.com/xianhua/2019_12/13/15/32/8_313.jpg?x-oss-process=style/preview_120"></image>
          <text class="members_right_title_text">{{itemBlock.groupName}}</text>
          <image class="members_right_title_img" src="https://image1.sansancloud.com/xianhua/2019_12/13/15/32/8_341.jpg?x-oss-process=style/preview_120"></image>
        </view>
        <view class="members_right_title_info" :data-link="'user_recharge.html?money='+membersList[swiperIndex-1].needPayAmount" @tap="tolinkUrl">
          <text>{{itemBlock.description}}</text>
          <!-- <text class="members_right_title_info_stress">可省 8090元</text> -->
        </view>
      </view>
      <view class="members_right_list">
        <view class="members_right_item" v-for="(item,indexTwo) in itemBlock.children" :key='indexTwo'>
          <image class="members_right_item_icon" :src="item.icon"></image>
          <view class="members_right_item_info">
            <text class="members_right_item_info_title">{{item.name}}</text>
            <text class="members_right_item_info_subtitle">{{item.description}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <custom-page-index-component :receiveData="sendFormData" v-if="sendFormData"></custom-page-index-component>
  <view class="bottom_block" :animation="animationData">
    <view class="open_btn" :data-link="'user_recharge.html?money='+membersList[swiperIndex-1].needPayAmount" @tap="clickBtn">
      <view class="open_btn_info">
        <text v-if="membersList[swiperIndex-1].gotType!=3">立即开通</text>
        <text v-else>消费开通</text>
        <view class="price_block">
          <text>￥</text>
          <text class="price_num">{{membersList[swiperIndex-1].needPayAmount}}</text>
          <text v-if="membersList[swiperIndex-1].limitType==2">/天</text>
          <text v-else></text>
        </view>
        <!-- <text class="line_price">¥12089</text> -->
      </view>
      <text class="open_btn_abstract">{{membersList[swiperIndex-1].limits.buyTip}}</text>
    </view>
    <view class="agreement_block" @click="tolinkUrl"  data-link="custom_page_member_agreement.html">
      <text>*开通即代表同意</text>
      <text style="color:#C1A77C">《会员协议》</text>
    </view>
  </view>
  </block>
  <block v-else>
      <view class="no_member_list">
          <image class="no_member_icon" src="https://image1.sansancloud.com/xianhua/2019_12/17/11/9/46_337.jpg?x-oss-process=style/preview_120"></image>
          <text>暂无会员信息~</text>
      </view>
  </block>
</view>
</template>

<script>

export default {
  data() {
    return {
      membersList:[],
      myMembers: {
        userLevel: 0
      },
      sendFormData: null,
      loginUser: "",
      setting: "",
      totalImg: 2,
      swiperIndex: 1,
      animationData:null,
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log('===options===', options);
    let that = this;
    // that.getMembersListData();
    that.getSessionUserInfo();
    console.log("===loginUser====", that.loginUser);
    console.log("===setting====", that.setting);
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    let that = this;
    that.swiperIndex=1
    that.getSessionUserInfo();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('===onReachBottom====');
  },
  methods: {
    getIndexData:function(id){
        let that=this;
        that.setData({
          sendFormData: null
        });
        setTimeout(function(){
            let sendFormData = JSON.stringify({
              title: 'noTitle',
              url: "member_" + id
            });
            that.setData({
              sendFormData: sendFormData
            });
        },500)
    },
    swiperChange: function (e) {
      let that=this;
      let index = Number(e.detail.current)
      that.getIndexData(that.membersList[index].id)
      that.animationFun(index)
    },
    animationFun(index){
      let that=this;
      let animation = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease',
      })
      let state = that.membersList[index].state;
      console.log("state",state)
      if (state) {
        animation.opacity(0).step()
      } else {
        animation.opacity(1).step()
      }
      that.setData({
        animationData: animation.export(),
        swiperIndex: index+1
      })
    },
    clickBtn:function(e){
        let that=this
        if(that.membersList[that.swiperIndex-1].gotType!=3){
            that.tolinkUrl(e)
        }else{
            getApp().globalData.toIndex();
        }
    },
    tolinkUrl: function (e) {
      let that=this;
      let linkUrl = e.currentTarget.dataset.link;
      if(linkUrl.indexOf('level_detail')!=-1){
        if(that.membersList[that.swiperIndex-1].state){
            getApp().globalData.linkEvent(linkUrl);
        }
      }else{
        getApp().globalData.linkEvent(linkUrl);
      }
    },

    /* 获取数据 */
    getMembersListData: function () {
      let that = this;
      let customIndex = getApp().globalData.AddClientUrl("/wx_find_user_levels.html");
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          console.log('====getUserCardPackage-res===', res);

          if (res.data.errcode == 0) {
            let data = res.data.relateObj;
            if(data.length!=0){
                for (let i = 0; i < data.length; i++) {
                    data[i].state=false
                    if(data[i].limits){
                        data[i].limits=JSON.parse(data[i].limits)
                    }
                  if (that.loginUser && data[i].levelValue == that.loginUser.platformUser.userLevel) {
                    console.log("拥有会员");
                    data[i].state=true
                    that.setData({
                      myMembers: data[i]
                    });
                  }
                }
                that.setData({
                  membersList: data,
                  totalImg:data.length
                });
                that.animationFun(0)
                that.getIndexData(data[0].id)
            }
          } else {
            wx.showModal({
              title: '提示',
              content: '主人~请求超时！确认重新加载',
              success: function (res) {
                if (res.confirm) {
                  that.getUserCardPackage();
                } else if (res.cancel) {
                  console.log('用户点击取消');
                }
              }
            });
          }

          console.log('===membersList===', that.membersList);
          console.log('===myMembers===', that.myMembers);
        },
        complete: function (res) {}
      });
    },
    getSessionUserInfo: function () {
      var that = this; 
      getApp().globalData.showToastLoading('loading', true);
      var postParamUserBank = getApp().globalData.AddClientUrl("/get_session_userinfo.html");
      wx.request({
        url: postParamUserBank.url,
        data: postParamUserBank.params,
        header: getApp().globalData.headerPost,
        success: function (res) {
          console.log(res.data);
          let data = res.data.relateObj;

          if (res.data.errcode == '0') {
            that.setData({
              loginUser: data
            });
          } else {
            wx.showToast({
              title: res.data.errMsg,
              image: '/wxcomponents/images/icons/tip.png',
              duration: 1000
            });
          }
          that.getMembersListData();
        },
        fail: function (res) {
          wx.hideLoading();
          wx.showToast({
            title: "请求错误",
            image: '/wxcomponents/images/icons/tip.png',
            duration: 1000
          });
          console.log(res.data);
        },
        complete: function (res) {
          wx.hideLoading();
        }
      });
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>